/*
Template Name: Elitehospital Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: js
*/
$(document).ready(function () {
    "use strict";
    // Real Time chart
    var data = []
        , totalPoints = 300;

    function getRandomData() {
        if (data.length > 0) data = data.slice(1);
        // Do a random walk
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50
                , y = prev + Math.random() * 10 - 5;
            if (y < 0) {
                y = 0;
            }
            else if (y > 100) {
                y = 100;
            }
            data.push(y);
        }
        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }
        return res;
    }
    // Set up the control widget
    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            }
            else if (updateInterval > 3000) {
                updateInterval = 3000;
            }
            $(this).val("" + updateInterval);
        }
    });
    var plot = $.plot("#placeholder", [getRandomData()], {
        series: {
            shadowSize: 0 // Drawing is faster without shadows
        }
        , yaxis: {
            min: 0
            , max: 100
        }
        , xaxis: {
            show: false
        }
        , colors: ["#fb9678"]
        , grid: {
            color: "#AFAFAF"
            , hoverable: true
            , borderWidth: 0
            , backgroundColor: '#FFF'
        }
        , tooltip: true
        , tooltipOpts: {
            content: "Y: %y"
            , defaultTheme: false
        }
    });

    function update() {
        plot.setData([getRandomData()]);
        // Since the axes don't change, we don't need to call plot.setupGrid()
        plot.draw();
        setTimeout(update, updateInterval);
    }
    update();
    //Flot Line Chart
    $(document).ready(function () {
        console.log("document ready");
        var offset = 0;
        plot();

        function plot() {
            var sin = []
                , cos = [];
            for (var i = 0; i < 12; i += 0.2) {
                sin.push([i, Math.sin(i + offset)]);
                cos.push([i, Math.cos(i + offset)]);
            }
            var options = {
                series: {
                    lines: {
                        show: true
                    }
                    , points: {
                        show: true
                    }
                }
                , grid: {
                    hoverable: true //IMPORTANT! this is needed for tooltip to work
                }
                , yaxis: {
                    min: -1.2
                    , max: 1.2
                }
                , colors: ["#fb9678", "#01c0c8"]
                , grid: {
                    color: "#AFAFAF"
                    , hoverable: true
                    , borderWidth: 0
                    , backgroundColor: '#FFF'
                }
                , tooltip: true
                , tooltipOpts: {
                    content: "'%s' of %x.1 is %y.4"
                    , shifts: {
                        x: -60
                        , y: 25
                    }
                }
            };
            var plotObj = $.plot($("#flot-line-chart"), [{
                data: sin
                , label: "sin(x)"
            , }, {
                data: cos
                , label: "cos(x)"
            }], options);
        }
    });
    //Flot Pie Chart
    $(function () {
        var data = [{
            label: "Series 0"
            , data: 10
            , color: "#4f5467"
        , }, {
            label: "Series 1"
            , data: 1
            , color: "#00c292"
        , }, {
            label: "Series 2"
            , data: 3
            , color: "#01c0c8"
        , }, {
            label: "Series 3"
            , data: 1
            , color: "#fb9678"
        , }];
        var plotObj = $.plot($("#flot-pie-chart"), data, {
            series: {
                pie: {
                    innerRadius: 0.5
                    , show: true
                }
            }
            , grid: {
                hoverable: true
            }
            , color: null
            , tooltip: true
            , tooltipOpts: {
                content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                shifts: {
                    x: 20
                    , y: 0
                }
                , defaultTheme: false
            }
        });
    });
    //Flot Moving Line Chart
    $(function () {
        var container = $("#flot-line-chart-moving");
        // Determine how many data points to keep based on the placeholder's initial size;
        // this gives us a nice high-res plot while avoiding more than one point per pixel.
        var maximum = container.outerWidth() / 2 || 300;
        //
        var data = [];

        function getRandomData() {
            if (data.length) {
                data = data.slice(1);
            }
            while (data.length < maximum) {
                var previous = data.length ? data[data.length - 1] : 50;
                var y = previous + Math.random() * 10 - 5;
                data.push(y < 0 ? 0 : y > 100 ? 100 : y);
            }
            // zip the generated y values with the x values
            var res = [];
            for (var i = 0; i < data.length; ++i) {
                res.push([i, data[i]])
            }
            return res;
        }
        //
        series = [{
            data: getRandomData()
            , lines: {
                fill: true
            }
    }];
        //
        var plot = $.plot(container, series, {
            colors: ["#01c0c8"]
            , grid: {
                borderWidth: 0
                , minBorderMargin: 20
                , labelMargin: 10
                , backgroundColor: {
                    colors: ["#fff", "#fff"]
                }
                , margin: {
                    top: 8
                    , bottom: 20
                    , left: 20
                }
                , markings: function (axes) {
                    var markings = [];
                    var xaxis = axes.xaxis;
                    for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 1) {
                        markings.push({
                            xaxis: {
                                from: x
                                , to: x + xaxis.tickSize
                            }
                            , color: "#fff"
                        });
                    }
                    return markings;
                }
            }
            , xaxis: {
                tickFormatter: function () {
                    return "";
                }
            }
            , yaxis: {
                min: 0
                , max: 110
            }
            , legend: {
                show: true
            }
        });
        // Update the random dataset at 25FPS for a smoothly-animating chart
        setInterval(function updateRandom() {
            series[0].data = getRandomData();
            plot.setData(series);
            plot.draw();
        }, 40);
    });
    //Flot Bar Chart
    $(function () {
        var barOptions = {
            series: {
                bars: {
                    show: true
                    , barWidth: 43200000
                }
            }
            , xaxis: {
                mode: "time"
                , timeformat: "%m/%d"
                , minTickSize: [2, "day"]
            }
            , grid: {
                hoverable: true
            }
            , legend: {
                show: false
            }
            , grid: {
                color: "#AFAFAF"
                , hoverable: true
                , borderWidth: 0
                , backgroundColor: '#FFF'
            }
            , tooltip: true
            , tooltipOpts: {
                content: "x: %x, y: %y"
            }
        };
        var barData = {
            label: "bar"
            , color: "#fb9678"
            , data: [
            [1354521600000, 1000]
            , [1355040000000, 2000]
            , [1355223600000, 3000]
            , [1355306400000, 4000]
            , [1355487300000, 5000]
            , [1355571900000, 6000]
        ]
        };
        $.plot($("#flot-bar-chart"), [barData], barOptions);
    });
    // sales bar chart
    $(function () {
        //some data
        var d1 = [];
        for (var i = 0; i <= 10; i += 1) d1.push([i, parseInt(Math.random() * 60)]);
        var d2 = [];
        for (var i = 0; i <= 10; i += 1) d2.push([i, parseInt(Math.random() * 40)]);
        var d3 = [];
        for (var i = 0; i <= 10; i += 1) d3.push([i, parseInt(Math.random() * 25)]);
        var ds = new Array();
        ds.push({
            label: "Data One"
            , data: d1
            , bars: {
                order: 1
            }
        });
        ds.push({
            label: "Data Two"
            , data: d2
            , bars: {
                order: 2
            }
        });
        ds.push({
            label: "Data Three"
            , data: d3
            , bars: {
                order: 3
            }
        });
        var stack = 0
            , bars = true
            , lines = true
            , steps = true;
        var options = {
            bars: {
                show: true
                , barWidth: 0.2
                , fill: 1
            }
            , grid: {
                show: true
                , aboveData: false
                , labelMargin: 5
                , axisMargin: 0
                , borderWidth: 1
                , minBorderMargin: 5
                , clickable: true
                , hoverable: true
                , autoHighlight: false
                , mouseActiveRadius: 20
                , borderColor: '#f5f5f5'
            }
            , series: {
                stack: stack
            }
            , legend: {
                position: "ne"
                , margin: [0, 0]
                , noColumns: 0
                , labelBoxBorderColor: null
                , labelFormatter: function (label, series) {
                    // just add some space to labes
                    return '' + label + '&nbsp;&nbsp;';
                }
                , width: 30
                , height: 5
            }
            , yaxis: {
                tickColor: '#f5f5f5'
                , font: {
                    color: '#bdbdbd'
                }
            }
            , xaxis: {
                tickColor: '#f5f5f5'
                , font: {
                    color: '#bdbdbd'
                }
            }
            , colors: ["#4F5467", "#01c0c8", "#fb9678"]
            , tooltip: true, //activate tooltip
            tooltipOpts: {
                content: "%s : %y.0"
                , shifts: {
                    x: -30
                    , y: -50
                }
            }
        };
        $.plot($(".sales-bars-chart"), ds, options);
    });
});